<template>
  <div class="search-page" :class="{ 'dark-mode': isDarkMode }">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="menu-icon" @click="toggleMenu">
        <img src="/static/tabs/order.png" alt="菜单" class="menu">
        <span style="font-size: 20px;">全部文件</span>
      </div>
      <div class="settings-icon" @click="toggleSettings">
        <span style="font-size: 20px; margin-right: 10px;">管理</span>
        <img src="/static/tabs/set.png" alt="设置" width="24" height="24" style="margin-right: 10px;">
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-container">
      <div class="search-box" :class="{ focused: isSearchFocused }">
        <img class="search-icon" src="/static/tabs/search.png" alt="搜索" width="20" height="20">
        <input 
          type="text" 
          placeholder="试试搜索文献，作者，关键词..." 
          @focus="isSearchFocused = true"
          @blur="isSearchFocused = false"
        />
      </div>
    </div>

    <!-- 今天标签 -->
    <div class="today-section">
      <div class="today-label">
        <img class="square-icon" src="/static/tabs/book.png" alt="今天" width="20" height="20">
        <span>今天</span>
      </div>
      <div class="more-options">
        <img src="/static/tabs/more.png" alt="更多选项" width="20" height="20" style="margin-right: 10px;">
      </div>
    </div>
    
    <!-- 添加按钮 -->
    <button class="add-button">
      <img src="/static/tabs/add.png" alt="添加" width="40" height="40">
    </button>

    <!-- 菜单弹窗 -->
    <div class="menu-popup" v-if="isMenuVisible" @click.self="closeMenu">
      <div class="menu-content">
        <div class="menu-item" @click="handleMenuClick('library')">
          <img src="/static/tabs/book.png" alt="文库" class="menu-item-icon">
          <span>文库</span>
        </div>
        <div class="menu-item" @click="handleMenuClick('folder')">
          <img src="/static/tabs/folder.png" alt="文件夹" class="menu-item-icon">
          <span>文件夹</span>
        </div>
        <div class="menu-item" @click="handleMenuClick('newFolder')">
          <img src="/static/tabs/add-black.png" alt="新建文件夹" class="menu-item-icon">
          <span>新建文件夹</span>
        </div>
      </div>
    </div>
    
    <!-- 设置弹窗 -->
    <div class="settings-drawer" :class="{ 'settings-drawer-open': isSettingsVisible }" @click.self="closeSettings">
      <div class="settings-content">
        <div class="settings-header">
          <h3>管理</h3>
          <div class="close-button" @click="closeSettings">&times;</div>
        </div>
        <div class="settings-list">
          <div class="settings-item" @click="handleSettingsClick('fullTranslation')">
            <span>全文AI翻译</span>
            <div class="toggle-switch" :class="{ 'active': isFullTranslation }">
              <div class="toggle-slider"></div>
            </div>
          </div>
          <div class="settings-item" @click="handleSettingsClick('titleTranslation')">
            <span>翻译文章标题</span>
            <div class="toggle-switch" :class="{ 'active': isTitleTranslation }">
              <div class="toggle-slider"></div>
            </div>
          </div>
          <div class="settings-item" @click="handleSettingsClick('translateTo')">
            <span>将原文翻译为...</span>
          </div>
          <div class="settings-item" @click="handleSettingsClick('darkMode')">
            <span>深色模式</span>
            <div class="toggle-switch" :class="{ 'active': isDarkMode }">
              <div class="toggle-slider"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const isSearchFocused = ref(false);
const isMenuVisible = ref(false);
const isSettingsVisible = ref(false);
const isDarkMode = ref(false);
const isFullTranslation = ref(false);
const isTitleTranslation = ref(false);

const toggleMenu = () => {
  isMenuVisible.value = !isMenuVisible.value;
};

const closeMenu = () => {
  isMenuVisible.value = false;
};

const handleMenuClick = (action) => {
  console.log('Menu action:', action);
  closeMenu();
};

const toggleSettings = () => {
  isSettingsVisible.value = !isSettingsVisible.value;
};

const closeSettings = () => {
  isSettingsVisible.value = false;
};

const handleSettingsClick = (action) => {
  console.log('Settings action:', action);
  switch (action) {
    case 'fullTranslation':
      isFullTranslation.value = !isFullTranslation.value;
      break;
    case 'titleTranslation':
      isTitleTranslation.value = !isTitleTranslation.value;
      break;
    case 'darkMode':
      isDarkMode.value = !isDarkMode.value;
      break;
  }
};

// 监听深色模式变化
watch(isDarkMode, (newVal) => {
  // 这里可以添加更多深色模式相关的逻辑
  console.log('深色模式状态:', newVal ? '开启' : '关闭');
});
</script>

<style scoped>
.search-page {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 5px;
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  min-height: 100vh;
  transition: background-color 0.3s ease;
}

.search-page.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

.dark-mode .top-bar,
.dark-mode .today-section,
.dark-mode .search-box,
.dark-mode .menu-content,
.dark-mode .settings-content {
  background-color: #1e1e1e;
  color: #ffffff;
}

.dark-mode .search-box {
  background-color: #2d2d2d;
}

.dark-mode .search-box.focused {
  background-color: #3d3d3d;
  border-color: #2196f3;
}

.dark-mode .today-section {
  border-bottom-color: #333;
}

.dark-mode .settings-item {
  border-bottom-color: #333;
}

.dark-mode .menu-item:hover {
  background-color: #333;
}

.dark-mode .settings-header h3,
.dark-mode .settings-item span,
.dark-mode .menu-item span {
  color: #ffffff;
}

/* 其他原有样式保持不变 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.menu-icon, .settings-icon {
  background: none;
  border: none;
}
.menu{
    height: 30px;
    width: 30px;
}

.search-container {
  margin: 16px 0;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 24px;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.search-box.focused {
  background-color: #e3f2fd;
  border-color: #2196f3;
  box-shadow: 0 0 0 1px #2196f3;
}

.search-icon {
  margin-right: 8px;
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  outline: none;
}

.today-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.today-label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.square-icon {
  margin-right: 8px;
}

.more-options {
  background: none;
  border: none;
  padding: 8px;
}

.add-button {
  position: fixed;
  bottom: 10%;
  right: 45%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #2196f3;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add-button img {
  filter: brightness(0) invert(1);
}

.menu-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
}

.menu-content {
  background-color: white;
  border-radius: 8px;
  padding: 8px 0;
  margin-top: 60px;
  margin-left: 20px;
  width: 160px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-item-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.menu-item span {
  font-size: 16px;
  color: #333;
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  width: 80%;
  max-width: 300px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: right 0.3s ease;
}

.settings-drawer-open {
  right: 0;
}

.settings-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.settings-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
}

.settings-list {
  display: flex;
  flex-direction: column;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.settings-item span {
  font-size: 16px;
  color: #333;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background-color: #ddd;
  border-radius: 12px;
  padding: 2px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch.active {
  background-color: #2196f3;
}

.toggle-slider {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-switch.active .toggle-slider {
  transform: translateX(20px);
}
</style>